<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">村级集体经济台账</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="table">
            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
              <tbody>
              <tr>
                <td width="25%">
                  <span>行政村名</span>
                </td>
                <td width="25%">
                  <span>村民人数</span>
                </td>
                <td width="25%">
                  <span>党员人数</span>
                </td>
                <td width="25%">
                  <span>集体经济年收入</span>
                </td>
              </tr>
              </tbody>
            </table>
            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                <tbody>
                <tr v-for="(item, index) in listData" :key="index">
                  <td width="100%" class="title">
                    <span>{{ item.title }}</span>
                  </td>
                  <td width="20%">
                    <span>{{ item.date }}</span>
                  </td>
                  <td width="20%">
                    <span :class="{colorRed: item.hot > 4999, colorOrange: item.hot < 10}">{{ item.hot }}</span>
                  </td>
                </tr>
                </tbody>
              </table>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import vueSeamlessScroll from 'vue-seamless-scroll'
    export default {
        name: "scanRadiuscun",
        components: {
            vueSeamlessScroll
        },




        data() {
            return {
                listData: [{
                    title: '钱花哪了?一图带你读懂年轻人的消费观',
                    date: '2020-05-05',
                    hot: 2306
                }, {
                    title: '“五一”假期前三天国内旅游收入超350亿元',
                    date: '2020-05-02',
                    hot: 5689
                }, {
                    title: '滴滴、美团、哈啰交战，本地生活会是终局？',
                    date: '2020-05-02',
                    hot: 9
                }, {
                    title: '“互联网+文化”逆势上行文娱消费云端真精彩',
                    date: '2020-04-25',
                    hot: 288
                }, {
                    title: '乐观还是悲观？巴菲特是个现实主义者！',
                    date: '2020-04-21',
                    hot: 158
                }, {
                    title: 'B站的后浪，会把爱优腾拍在沙滩上吗?',
                    date: '2020-04-20',
                    hot: 889
                }, {
                    title: '华为如何做投资的：先给两亿订单一年上市',
                    date: '2020-04-01',
                    hot: 5800
                }, {
                    title: '马斯克：特斯拉股价太高了，我要卖豪宅',
                    date: '2020-03-25',
                    hot: 6
                }, {
                    title: '人民日报海外版：云模式巧解“就业难”',
                    date: '2020-03-16',
                    hot: 88
                }, {
                    title: '刚刚港股"崩了"：狂跌近1000点！',
                    date: '2020-03-12',
                    hot: 88
                }, {
                    title: '个人健康信息码国家标准发布',
                    date: '2020-02-28',
                    hot: 5
                }, {
                    title: '传软银国际裁员约10%两名管理合伙人离职',
                    date: '2020-02-15',
                    hot: 258
                }, {
                    title: '27万个岗位：区块链、人工智能等专场招聘',
                    date: '2020-02-10',
                    hot: 198
                }, {
                    title: '一季度电商发展势头迅猛农村电商破1300万家',
                    date: '2020-02-08',
                    hot: 19
                }]
            }
        },
        computed: {
            optionSetting () {
                return {
                    step: 0.5, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    // autoPlay: false,
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
  .sn-container {
    left: 10px;
    top: 730px;
    width: 508px;
    height: 30%;
    %table-style {
      width: 100%;
      height: 35px;
      table-layout: fixed;
      tr {
        td {
          padding: 10px 5px;
          text-align: center;
          background-color: transparent;
          white-space: nowrap;
          overflow: hidden;
          color: #E2E5FF;
          font-size: 14px;
        }
      }
    }
    .table {
      .table-header {
        @extend %table-style;
      }
      .seamless-warp {
        height: 400px;
        overflow: hidden;
        visibility: visible;
        .colorRed {
          color: #FF4669;
        }
        .colorOrange {
          color: #FFC956;
        }
        .item {
          height: auto;
          @extend %table-style;
          tr {
            td {
              &.title {
                text-overflow: ellipsis;
                display: inline-block;
              }
            }
          }
        }
      }
    }
  }
</style>